<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>菜单 - 操作</title>
	<link rel="stylesheet" href="../assets/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../assets/css/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
	<link rel="stylesheet" href="../assets/css/public.css" media="all">
	<style type="text/css">
		#pId {
			display: flex;
			flex-wrap: wrap;
		}

		#pId>* {
			margin-right: 0;
		}

		#pId>.layui-input-inline {
			margin: 0;
			left: 0;
		}
	</style>
</head>

<body>
	<div class="iframe-container">
		<div class="iframe-main">
			<form class="layui-form" id="menu_action" lay-filter="menu_action">
				<input type="number" name="id" lay-verify="int" autocomplete="off" class="layui-input layui-hide">
				<div class="layui-form-item">
					<label class="layui-form-label">父菜单</label>
					<div class="layui-input-block" id="pId">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label required">标题</label>
					<div class="layui-input-block">
						<input type="text" name="title" lay-verify="required" lay-reqtext="标题是必填项，不能为空！" autocomplete="off" placeholder="请输入标题" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">图标</label>
					<div class="layui-input-block">
						<input type="text" name="icon" id="icon" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">链接</label>
					<div class="layui-input-block">
						<textarea name="href" class="layui-textarea" placeholder="父级为顶级时，此项作为模块标识，不作链接" nowarp></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">跳转方式</label>
					<div class="layui-input-block">
						<select name="target" lay-filter="target">
							<option value="">默认</option>
							<option value="_self">当前窗口</option>
							<option value="_blank">新窗口</option>
							<option value="_parent">父窗口</option>
							<option value="_top">顶层窗口</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">排序</label>
					<div class="layui-input-block">
						<input type="number" name="order" lay-verify="int" autocomplete="off" class="layui-input" placeholder="默认为0">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<input type="checkbox" name="status" lay-skin="switch" lay-filter="status" lay-text="启用|禁用" checked>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<script src="../assets/lib/layui/layui.js" charset="utf-8"></script>
	<script src="../assets/js/lay-config.js" charset="utf-8"></script>
	<script src="../assets/js/public.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		if (!window.frameElement) location.href = '/';

		layui.use(['jquery', 'form', 'iconPicker', 'selectN'], function() {
			var $ = layui.jquery,
				form = layui.form,
				iconPicker = layui.iconPicker,
				selectN = layui.selectN;

			var catIns,
				params = parent.params || {},
				pData = params.obj ? params.obj.data : {};

			lianyi.request({
				url: lianyi.api('menu_list_title', 1),
				data: params.id ? { id: params.id } : {},
				msg: '获取父级数据...',
				success: function(res) {
					var pIds = params.id || params.pId ? getParent(res.data, pData.pId) : [res.data[0].id];
					if (params.pId) pIds.push(pData.id);

					catIns = selectN({
						elem: '#pId', //元素容器【必填】
						data: res.data, //候选数据【必填】
						width: '100px', //设置宽度
						selected: pIds, //默认值
						last: true, //为真只取最后一个值
						tips: ['顶级'], //空值项提示，可设置为数组['请选择省','请选择市','请选择县']
						filter: '', //事件过滤器，lay-filter名 不设置与选择器相同(去#.)
						name: 'pId', //input的name 不设置与选择器相同(去#.)
						delimiter: ',', //数据分隔符
						field: { idName: 'id', titleName: 'title', childName: 'child' }, //数据的键名
						formFilter: null //表单区分 form.render(type, filter); 为class="layui-form" 所在元素的 lay-filter="" 的值
					});

					if (params.id) {
						form.val('menu_action', {
							id: pData.id,
							pId: pData.pId,
							title: pData.title,
							icon: pData.icon,
							href: pData.href,
							target: pData.target,
							order: pData.order,
							status: pData.status === 1
						});
					} else if (params.pId)
						form.val('menu_action', { pId: pData.id, status: true });
					else
						form.val('menu_action', { pId: 1, status: true });

					iconPicker.render({
						elem: '#icon', // 选择器，推荐使用input
						url: "../assets/js/lay-module/iconPicker/4.7.0.json", // fa 图标接口
						search: true, // 是否开启搜索：true/false，默认true
						width: '200',
						row: 3, // 每页图标行数，默认 3，<= 0 不开启分页
						column: 4, // 每行图标个数，默认 4
						select: function(fa) { // 选择回调
							// console.log(fa);
						},
						success: function(elem) { // 渲染成功后的回调
						}
					});
				}
			});

			form.on('submit(submit)', function(data) {
				var field = data.field;
				field.pId = catIns.lastValue === '' && catIns.values.length > 1 ? catIns.values[catIns.values.length - 2] : catIns.lastValue;
				field.status = field.status === 'on' ? 1 : 0;

				var c = 'update';
				if (!REGEX.isInt(field.id)) {
					delete field.id;
					c = 'add';
				} else if (false === (field = updateParams(field, pData))) {
					lianyi.fail('无变化！');
					return false;
				}

				lianyi.request({
					url: lianyi.api(c, 1),
					data: field,
					success: function(res) {
						if (params.id) params.obj.update(field);
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
					}
				});

				return false;
			});
		});
	</script>
</body>

</html>